<template>
  <u-tabbar :value="funValue" @change="name => funValue = name" :fixed="true" :placeholder="true"
            :safeAreaInsetBottom="true">
    <u-tabbar-item text="览" icon="grid" @click="switchTab('oneInfo')"></u-tabbar-item>
    <u-tabbar-item text="词" icon="order" @click="switchTab('word')"></u-tabbar-item>
    <u-tabbar-item text="测" icon="question-circle" @click="switchTab('vocalTest')"></u-tabbar-item>
    <u-tabbar-item text="玩" icon="play-circle" @click="switchTab('play')"></u-tabbar-item>
    <!--    <u-tabbar-item text="我的" icon="account" @click="switchTab('mine')"></u-tabbar-item>-->
  </u-tabbar>
</template>

<script>
export default {
  props: {
    current: {
      type: String,
      default: 'oneInfo'
    }
  },
  data() {
    return {
      funValue: ''
    }
  },
  onLoad() {
    setTimeout(() => {
      this.switchTab(this.current)
    }, 500)
  },
  methods: {
    switchTab(tab) {
      this.$emit('change', tab)
    }
  }
}
</script>

<style scoped>
::v-deep .u-icon__icon {
  font-size: 24px !important;
}
</style>
